<template>
  <section>
    <div class="app-container page-calendar">
      <full-calendar :events="fcEvents" lang="zh" @dayClick="dayClick" @eventClick="eventClick" />

      <el-dialog :visible.sync="dialogWriteEventFormVisible" title="每日小提醒" width="20%">
        <el-form :model="form">
          <el-form-item label="">
            <el-input v-model="form.content" type="textarea"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogWriteEventFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveNoteClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </section>
</template>

<script>
import moment from 'moment'
import fullCalendar from 'vue-fullcalendar'
import { monthnotes, create, del } from '@/api/keynote'
moment.locale('zh-cn')

export default {
  components: {
    fullCalendar
  },
  filters: {},
  data() {
    return {
      fcEvents: [],
      dialogWriteEventFormVisible: false,
      form: {
        day: '',
        content: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      monthnotes().then(response => {
        const results = response
        this.fcEvents = []
        for (let i = 0; i < results.length; i++) {
          this.fcEvents.push({
            id: results[i].id,
            start: results[i].day,
            title: results[i].note
          })
        }
      })
    },
    eventClick(event) {
      console.log(event)
      this.$confirm('刪除此条记事, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(event.id).then(response => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '已删除!'
          })
        })
      }).catch(() => {
      })
    },
    dayClick(day) {
      this.dialogWriteEventFormVisible = true
      this.form.day = day
    },
    saveNoteClick() {
      const formattedDay = moment(this.form.day).format('YYYY-MM-DD')
      create({
        day: formattedDay,
        note: this.form.content
      }).then(response => {
        this.dialogWriteEventFormVisible = false
        this.fetchData()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.full-calendar-body{
  .dates {
    .week-row {
      .day-cell {
        &.today{
          background-color:#f8e170;
        }
      }
    }
  }
}
</style>
